<template>
  <div class="app-container">
    <div class="filter-container">
      <div class="list">
        <!-- 数据总计区域 start -->
        <div v-show="!listLoading" class="pagination-container">
          <el-row>
          <el-col :span="18">
             <el-col :span="4" style="margin-right:10px;">
              <el-select @change="selectUser" clearable v-model="query.user_id" placeholder="请选择人员">
                <el-option v-for="item in userData" :key="item.id" :label="item.user_name" :value="item.id"></el-option>
              </el-select>
            </el-col>
            <el-col :span="6">
              <el-input v-model="query.name" @change="selectName" clearable placeholder="请输入工单名称"></el-input>
            </el-col>
          </el-col>
          <el-col :span="6">
            <el-button size="small" style="margin-bottom: 10px;float:right" type="primary" @click="add()">添加</el-button>
          </el-col>
          </el-row>
          <div style="margin-right: 10px;margin-bottom: 10px;float:left;color:rgb(44,162,252);padding-top: 7px;font-size: 14px">
            数据总计: {{ total }} (条)
          </div>
        </div>

        <el-table
          v-loading.body="listLoading"
          border
          :data="list"
          tooltip-effect="dark"
          style="width: 100%;"
          @selection-change="handleSelectionChange">
          <el-table-column type="selection" width="55" align="center"> </el-table-column>

          <el-table-column type="expand">
            <template slot-scope="props">
              <el-form label-position="left" inline class="demo-table-expand">
                <div v-if="props.row.orderParam !== null && props.row.orderParam.charge_type === 1">
                  <el-row>
                    <el-col :span="12"><el-form-item label="最大充电电压" class="el-form-item-table"><span>{{ props.row.orderParam.max_voltage }}</span></el-form-item></el-col>
                    <el-col :span="12"><el-form-item label="最小充电电压" class="el-form-item-table"><span>{{ props.row.orderParam.min_voltage }}</span></el-form-item></el-col>
                  </el-row>
                  <el-row>
                    <el-col :span="12"><el-form-item label="最大充电电流" class="el-form-item-table"><span>{{ props.row.orderParam.max_current }}</span></el-form-item></el-col>
                    <el-col :span="12"><el-form-item label="整定电压" class="el-form-item-table"><span>{{ props.row.orderParam.set_voltage }}</span></el-form-item></el-col>
                  </el-row>
                  <el-row>
                    <el-col :span="12"><el-form-item label="整定电流" class="el-form-item-table"><span>{{ props.row.orderParam.set_current }}</span></el-form-item></el-col>
                    <el-col :span="12"><el-form-item label="电池电压" class="el-form-item-table"><span>{{ props.row.orderParam.battery_voltage }}</span></el-form-item></el-col>
                  </el-row>
                  <el-row>
                    <el-col :span="12"><el-form-item label="负载启动电压" class="el-form-item-table"><span>{{ props.row.orderParam.load_start_voltage }}</span></el-form-item></el-col>
                    <el-col :span="12"><el-form-item label="国标版本" class="el-form-item-table"><span>{{ props.row.orderParam.inter_version }}</span></el-form-item></el-col>
                  </el-row>
                   <el-row>
                    <el-col :span="12"><el-form-item label="充电桩类型" class="el-form-item-table"><span>{{ chargeType[props.row.charge.charge_type] }}</span></el-form-item></el-col>
                    <el-col :span="12"><el-form-item label="检测项目进度" class="el-form-item-table"><span>{{ props.row.proportion }}%</span></el-form-item></el-col>
                  </el-row>
                   <!--照片和进度-->
                  <el-row>
                    <el-col :span="24"><el-form-item label="充电桩照片" class="el-form-item-table">
                      <span v-if="props.row.orderImage" v-for="(img, img_key) in props.row.orderImage" :key="img_key">
                        <a :href="photo(img.img_url, '800x800')" target="_blank"><img :src="photo(img.img_url, '140x100')" width="100" class="el-upload--picture-card" style="margin-right: 10px;"></a>
                      </span>
                    </el-form-item></el-col>
                  </el-row>
                </div>
                <div v-if="props.row.orderParam !== null && props.row.orderParam.charge_type === 2">
                  <!-- 交流参数 -->
                  <el-row>
                    <el-col :span="12"><el-form-item label="最大电流" class="el-form-item-table"><span>{{ props.row.orderParam.max_current }}</span></el-form-item></el-col>
                    <el-col :span="12"> <el-form-item label="负载" class="el-form-item-table"><span>{{ props.row.orderParam.load }}</span></el-form-item></el-col>
                  </el-row>
                  <el-row>
                    <el-col :span="12"><el-form-item label="交流桩类型" class="el-form-item-table"><span>{{ props.row.orderParam.current_type }}</span></el-form-item></el-col>
                    <el-col :span="12"><el-form-item label="可调占空比" class="el-form-item-table"><span>{{ props.row.orderParam.air_ratio }}</span></el-form-item></el-col>
                  </el-row>
                  <el-row>
                    <el-col :span="12"><el-form-item label="连接方式" class="el-form-item-table"><span>{{ props.row.orderParam.connection_mode }}</span></el-form-item></el-col>
                    <el-col :span="12"><el-form-item class="el-form-item-table"></el-form-item></el-col>
                  </el-row>
                   <el-row>
                    <el-col :span="12"><el-form-item label="充电桩类型" class="el-form-item-table"><span>{{ chargeType[props.row.charge.charge_type] }}</span></el-form-item></el-col>
                    <el-col :span="12"><el-form-item label="检测项目进度" class="el-form-item-table"><span>{{ props.row.proportion }}%</span></el-form-item></el-col>
                  </el-row>
                   <!--照片和进度-->
                  <el-row>
                    <el-col :span="24"><el-form-item label="充电桩照片" class="el-form-item-table">
                      <span v-if="props.row.orderImage" v-for="(img, img_key) in props.row.orderImage" :key="img_key">
                        <a :href="photo(img.img_url, '800x800')" target="_blank"><img :src="photo(img.img_url, '140x100')" width="100" class="el-upload--picture-card" style="margin-right: 10px;"></a>
                      </span>
                    </el-form-item></el-col>
                  </el-row>
                </div>


              </el-form>
            </template>
          </el-table-column>

          <el-table-column prop="id" label="序号" min-width="60" align="center"></el-table-column>
          <el-table-column prop="name" label="工单名称" min-width="120" align="center"></el-table-column>
          <el-table-column label="充电桩名称" min-width="100" align="center">
            <template slot-scope="scope">
              <el-tag>{{ scope.row.charge.charge_name }}</el-tag>
            </template>
          </el-table-column>
          <el-table-column prop="user.user_name" label="检测人员" min-width="100" align="center"></el-table-column>
          <el-table-column label="状态" min-width="90" align="center">
            <template slot-scope="scope">
              <el-button type="default" size="mini" v-if="scope.row.status === 0"  >{{ orderType[scope.row.status] }}</el-button>
              <el-button type="primary" size="mini" v-if="scope.row.status === 1" >{{ orderType[scope.row.status] }}</el-button>
              <el-button type="warning" size="mini" v-if="scope.row.status === 2" >{{ orderType[scope.row.status] }}</el-button>
              <el-button type="info" size="mini" v-if="scope.row.status === 3">{{ orderType[scope.row.status] }}</el-button>
              <el-button type="success" size="mini" v-if="scope.row.status === 4">{{ orderType[scope.row.status] }}</el-button>
            </template>
          </el-table-column>
          <el-table-column prop="instrument.instrument_num" label="检测仪器" min-width="120" align="center"></el-table-column>
          <el-table-column prop="create_time" label="创建时间" min-width="150" align="center">
            <template slot-scope="scope">
              <i class="el-icon-time"></i>
              <span style="margin-left: 5px">{{ scope.row.create_time }}</span>
            </template>
          </el-table-column>

          <el-table-column label="操作" min-width="210" align="center">
             <template slot-scope="scope">

                <el-button type="warning" size="mini" v-if="scope.row.status === 0 || scope.row.status === 2" @click="update(scope.$index)">编辑</el-button>
                <el-button type="warning" size="mini" v-else disabled @click="update(scope.$index)">编辑</el-button>

                <el-button type="danger" size="mini" v-if="scope.row.status === 0 || scope.row.status === 2" @click="deleteDialog(scope.row.id)">删除</el-button>
                <el-button type="danger" size="mini" v-else disabled @click="deleteDialog(scope.row.id)">删除</el-button>
                <el-button type="success" size="mini" @click="show(scope.row.id)">查看</el-button>
            </template>
          </el-table-column>

        </el-table>

      </div>
      <!-- 分页区域 start -->
      <div v-show="!listLoading" class="pagination-container">
        <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page.sync="query.page"
                       :page-sizes="[10, 20, 30, 50]" :page-size="query.limit" layout="total, sizes, prev, pager, next, jumper" :total="total">
        </el-pagination>
      </div>

      <!-- 添加 删除 模态框-->
      <el-dialog :title="modelText[status]" :visible.sync="formStatus" v-loading.fullscreen.lock="formLoading">
        <el-form :model="formData" :rules="rules" ref="formData">
          <el-form-item label="选择充电桩" :label-width="formLabelWidth" prop="charge_id">
            <el-select v-model="formData.charge_id" filterable allow-create  :disabled="formDisabled" placeholder="请选择充电桩" style="width: 100%;">
              <el-option v-for="item in chargeData" :key="item.id" :label="item.charge_name" :value="item.id"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="选择检测人员" :label-width="formLabelWidth" prop="user_id">
            <el-select v-model="formData.user_id" filterable allow-create  :disabled="formDisabled" placeholder="请选择检测人员" style="width: 100%;">
              <el-option v-for="item in userData" :key="item.id" :label="item.user_name" :value="item.id"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="选择检测仪器" :label-width="formLabelWidth" prop="instrument_id">
            <el-select v-model="formData.instrument_id" filterable allow-create  :disabled="formDisabled" placeholder="请选择检测仪器" style="width: 100%;">
              <el-option v-for="item in instrumentData" :key="item.id" :label="item.instrument_num" :value="item.id"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="工单名称" :label-width="formLabelWidth" prop="name">
            <el-input v-model.trim="formData.name" placeholder="请输入工单名称" auto-complete="off"></el-input>
          </el-form-item>
          <el-form-item label="选择检测项目" :label-width="formLabelWidth" prop="project_id">
            <!-- <el-select
              v-model="formData.project_id"
              multiple
              filterable
              allow-create
              default-first-option
              style="width:100%"
              placeholder="请选择检测项目">
              <el-option
                v-for="item in projectData"
                :key="item.id"
                :label="item.project_name"
                :value="item.id">
              </el-option>
            </el-select> -->
            <el-tree
              :data="projectData"
              show-checkbox
              node-key="id"
              default-expand-all
              :default-checked-keys="project_ids"
              ref="tree"
              highlight-current
              :props="defaultProps">
            </el-tree>
          </el-form-item>

        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="formStatus = false">取 消</el-button>
          <el-button type="primary" v-if="status === 'create'" @click="create()">确 定</el-button>
          <el-button type="primary" v-else @click="editor()">确 定</el-button>
        </div>
      </el-dialog>

      <!--查看检测项目报告-->
      <el-dialog title="查看检测信息" :visible.sync="projectStatus" v-loading.fullscreen.lock="projectLoading">
         <template>
          <el-table
            :data="orderProjectData"

            style="width: 100%">
            <el-table-column
              prop="create_time"
              label="检测时间"
              align="center"
              width="180">
              <template slot-scope="scope">
                <i class="el-icon-time"></i>
                <span style="margin-left: 10px">{{ scope.row.create_time }}</span>
              </template>
            </el-table-column>
            <el-table-column
              prop="project_name"
              label="检测名称"
              align="center"
              width="300">
            </el-table-column>
            <el-table-column
              prop="status"
              align="center"
              label="是否合格">
              <template slot-scope="scope">
                <el-tag type="info" v-if="scope.row.status === '未检测'">{{ scope.row.status }}</el-tag>
                <el-tag type="danger" v-else-if="scope.row.status === '不合格'">{{ scope.row.status }}</el-tag>
                <el-tag type="success" v-else>{{  scope.row.status }}</el-tag>
              </template>
            </el-table-column>
          </el-table>
        </template>
      </el-dialog>
    </div>
  </div>
</template>

<script>
  import { orderList, orderAttr, createOrder, deleteOrder, updateOrder, orderProject } from '@/api/api'
  export default {
    data() {
      return {
        defaultProps: {
          children: 'children',
          label: 'label'
        },
        total: 10,
        listLoading: false,
        list: [],
        query: { // 列表请求数据
          name: '',
          user_id: '',
          page: 1,
          limit: 10 // 每页显示10条
        },
        modelText: {
          'create': '添加工单',
          'update': '编辑信息'
        },
        status: 'create',
        formLabelWidth: '120px',
        dialogLoading: false,
        formStatus: false,
        formDisabled: false,
        formLoading: false,
        projectLoading: false,
        projectStatus: false,
        formData: {
          id: '',
          name: '',
          charge_id: '',
          user_id: '',
          instrument_id: '',
          project_id: []
        },
        project_ids: [],
        /** 充电桩类型 */
        chargeData: [],
        /** 人员列表 */
        userData: [],
        /** 仪器列表 */
        instrumentData: [],
        /** 检测项目列表 */
        projectData: [],
        orderProjectData: [],
        /** 验证规则 */
        /** 工单类型转换 */
        orderType: {
          0: '待接受',
          1: '已接受',
          2: '已取消',
          3: '进行中',
          4: '完成检测'
        },
        chargeType: {
          1: '交流',
          2: '直流',
          3: '交/直流'
        },
        rules: {
          instrument_id: [{ required: true, message: '请选择仪器', trigger: 'blur' }],
          charge_id: [{ required: true, message: '请选择充电桩', trigger: 'blur' }],
          user_id: [{ required: true, message: '请选择检修人员', trigger: 'blur' }],
          project_id: [{ required: true, message: '请选择项目', trigger: 'blur' }],
          name: [{ required: true, message: '请输入工单名称', trigger: 'blur' }]
        }
      }
    },
    methods: {
      // 选择操作
      handleSelectionChange(val) {
        console.log(val)
      },
      // 获取充电桩列表
      fetchList() {
        // 开启加载层
        this.listLoading = true
        orderList(this.query).then(response => {
          // 当page不等于1时 判断返回数组是否为空
          if (!response.data && this.query.page !== 1) {
            // 当前页－1
            this.query.page = this.query.page - 1
            // 重新获取数据
            this.fetchList()
          } else {
            // 添加列表数据
            this.list = response.data
            // 设置总条数
            this.total = response.count
            // 关闭 加载层
            this.listLoading = false
          }
        })
      },
      /** 展开添加视图 */
      add() {
        this.status = 'create'
        this.formStatus = true
        this.clear()
        for (var i in this.formData) {
          this.formData[i] = ''
        }
        this.formData.is_del = 1
        this.formDisabled = false
      },
      /** 执行添加数据操作 */
      create() {
        this.formData.project_id = this.$refs.tree.getCheckedKeys()
        this.$refs['formData'].validate((valid) => {
          if (valid) {
            this.listLoading = true
            // 创建
            createOrder(this.formData).then(response => {
              this.$notify.success({
                title: '信息提示',
                message: '添加成功',
                duration: 3000
              })
              this.formStatus = false
              this.listLoading = false
              this.fetchList()
            }).catch(() => {
              this.listLoading = false
            })
          }
        })
      },
      /** 删除数据操作 */
      deleteDialog(id) {
        this.$confirm('确定删除该数据吗, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          deleteOrder({ id: id, is_del: 2 }).then(response => {
            this.$notify.success({
              title: '信息提示',
              message: '删除成功',
              duration: 3000
            })
            this.fetchList()
          })
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          })
        })
      },
      /** 编辑信息 */
      update(index) {
        this.formDisabled = false
        this.status = 'update'
        for (const item in this.formData) {
          this.formData[item] = this.list[index][item]
        }
        // 获取所选择的工单项目
        if (this.list[index]['orderProject'] !== null) {
          var arr = []
          for (const n in this.list[index]['orderProject']) {
            arr.push(this.list[index]['orderProject'][n].project_id)
          }
          this.project_ids = arr
          console.log(this.project_ids)
        }

        if (this.list[index].pid < 1) {
          this.formDisabled = true
        }
        this.formStatus = true
      },
      /** 处理编辑信息 */
      editor() {
        this.formData.project_id = this.$refs.tree.getCheckedKeys()
        this.$refs['formData'].validate((valid) => {
          if (valid) {
            this.formStatus = true
            // 编辑
            updateOrder(this.formData).then(response => {
              this.$notify.success({
                title: '信息提示',
                message: response,
                duration: 3000
              })
              this.formStatus = false
              this.listLoading = false
              this.fetchList()
            }).catch(() => {
              this.listLoading = false
            })
          }
        })
      },
      /** 置空数据 **/
      clear() {
        if (this.$refs['formData']) {
          this.$refs['formData'].resetFields()
        }
      },
      // 自定义显示条数
      handleSizeChange(value) {
        // 重新定义每页显示几条
        this.query.page = 1
        this.query.limit = value
        this.fetchList()
      },
      // 页数跳转
      handleCurrentChange(value) {
        this.query.page = value
        this.fetchList()
      },
      // 超出隐藏
      maxSlice(str, maxLength) {
        return str.length > maxLength ? str.slice(0, maxLength) + '...' : str
      },
      // 属性列表
      attrList() {
        orderAttr().then(response => {
          this.chargeData = response.chargeData
          this.instrumentData = response.instrumentData
          this.userData = response.userData
          this.projectData = response.projectData
        })
      },
      selectName() {
        this.fetchList()
      },
      selectUser() {
        this.fetchList()
      },
      // 查看检测项目数据
      show(id) {
        this.projectLoading = true
        this.projectStatus = true
        orderProject({ id: id }).then(response => {
          this.orderProjectData = response
          this.projectLoading = false
        })
      },
      // 获取图片地址
      photo(photo, size) {
        if (photo) {
          return process.env.IMG_URL + '' + photo
        }
      }
    },
    mounted() {
      this.fetchList() // 自动请求列表
      this.attrList() // 属性列表
    }
  }
</script>

<style>
  .el-form-item-table {
    margin-bottom: 0;
  }
  .el-form--label-left .el-form-item__label {
    text-align: right;
  }
  .el-form-item__label {
    width: 100px;
    text-align: right;
  }
  .el-upload--picture-card {
    width: 100px;
    height: 80px;
  }
</style>
